<template>
  <div class="usersApprovalsContainer">
    <el-card>
      <div class="approvalsTop">
        <el-tabs v-model="tagName" @tab-click="tabSwitch">
          <el-tab-pane label="全部" name="copy"><span /></el-tab-pane>
          <el-tab-pane label="我发起的" name="launch"> <span /></el-tab-pane>
          <el-tab-pane label="待审批" name="approvals"><span /></el-tab-pane>
        </el-tabs>
      </div>
      <div>
        <span>审批类型：</span>
        <el-radio-group v-model="approvalsTypes" style="margin:5px 0">
          <el-radio
            v-for="item in approvalsType"
            :key="item.id"
            :label="item.key"
            :value="item.key"
            @change="changeSelectParams"
          >{{ item.name }}</el-radio>
        </el-radio-group>
      </div>
      <div v-if="tagName!=='approvals'">
        <span>审批状态：</span>
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;" />
        <el-checkbox-group v-model="checkedCcates" @change="changeSelectParams">
          <el-checkbox v-for="value in approvalsStates" :key="value.id" :label="value.id">{{ value.value }}</el-checkbox>
        </el-checkbox-group>
      </div>

      <el-table border :data="tableData">
        <el-table-column type="index" />
        <el-table-column label="审批类型" prop="processName" sortable="" />
        <el-table-column label="申请人" prop="username" sortable="" />

        <el-table-column label="当前审批人" prop="procCurrNodeUserName" sortable="" />
        <el-table-column
          label="申请时间"
          prop="procApplyTime"
          sortable=""
        >
          <template slot-scope="scope">
            <span>{{ scope.row.procApplyTime | formatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审批部门" sortable="" prop="departmentName" />
        <el-table-column label="审批状态" sortable="" prop="processState" :formatter="formatFormEmployment" />
        <el-table-column label="操作区" sortable="" prop="" width="500">
          <template slot-scope="{row}">

            <el-button type="primary" size="small" @click="lookFrom(row.processKey,row.processId)"> 查看</el-button>
            <el-button
              v-show="(tagName == 'copy' || tagName == 'approvals')&&(row.processState==='2')"
              size="small"
              type="success"
              @click="clickPass('2',row.processId)"
            > 通过</el-button>
            <el-button
              v-show="(tagName == 'copy' || tagName == 'approvals')&&(row.processState==='2')"
              size="small"
              type="danger"
              @click="clickPass('3',row.processId)"
            > 驳回</el-button>
            <el-button
              v-show="(tagName == 'launch')&&(row.processState==='4')"
              size="small"
              type="warning"
              @click="clickPass('4',row.processId)"
            > 撤销</el-button>

          </template>

        </el-table-column>
      </el-table>

    </el-card>
    <el-dialog :visible.sync="dialogVisible">
      <ApplicationForm v-if="dialogVisible" :id="id" ref="approvalProcess" :selected-name="selectedName" />
    </el-dialog>
    <!-- 通过审核 -->
    <el-dialog
      title="通过审核"
      :visible.sync="adoptVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span><el-input v-model="formData.handleOpinion" type="textarea" /></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adoptVisible = false">取消</el-button>
        <el-button type="primary" @click="handleProcess">确认</el-button>
      </span>
    </el-dialog>
    <!-- end -->
    <div class="block">

      <!-- :current-page="currentPage4" -->

      <el-pagination
        :page-sizes="[10, 8, 5, 3]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(total)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>

</template>

<script>
import ApplicationForm from '@/components/applicationForm'
import employmentEnum from '@/api/constant/approvals'
import { getApprovalList, approvalsDel,
  approvalsPass,
  approvalsReject, getFlowList } from '@/api/approvals'
import { mapGetters } from 'vuex'
export default {
  components: {
    ApplicationForm
  },

  data() {
    return {

      id: '',
      selectedName: '',
      dialogVisible: false,
      checkAll: false,
      checkedCcates: [],
      isIndeterminate: true,
      approvalsStates: [],
      approvalsTypes: [],
      approvalsType: '',
      tagName: '',
      total: '',
      tableData: [],
      pagination: {
        page: 1,
        processKey: '',
        processState: '',
        pageSize: 10 },
      adoptVisible: false,
      formData: {
        handleOpinion: '',
        processId: '',
        handleType: ''
      }
    }
  },
  computed: {
    ...mapGetters(['userId'])

  },
  created() {
    this.getFlowList()
    this.getApprovalList()
    this.getapprovalsStates()
  },
  methods: {
    // 获取流程列表
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getApprovalList()
    },
    handleCurrentChange(val) {
      this.pagination.page = val
      this.getApprovalList()
    },
    async  getFlowList() {
      this.approvalsType = await getFlowList()
      // console.log(this.approvalsType)
    },
    // 获取列表页面
    async  getApprovalList() {
      const result = await getApprovalList(this.pagination)
      // console.log(result)
      const { rows, total } = result
      this.tableData = rows
      console.log(this.tableData)
      this.total = total
    },
    getapprovalsStates() {
      this.approvalsStates = employmentEnum.approvalState
      // console.log(this.approvalsStates)
    },
    // 利用枚举数据处理状态
    formatFormEmployment(row, column, cellValue) {
      const obj = employmentEnum.approvalState.find(item => item.id === cellValue)

      return obj.value
    },
    // 全选
    handleCheckAllChange(val) {
      this.checkedCcates = val ? this.approvalsStates.map(v => {
        return v.id
      }) : []
      this.isIndeterminate = false
      console.log(this.checkedCcates)

      this.pagination.processState = String(this.checkedCcates.join(','))
      console.log(this.pagination.processState)

      this.getApprovalList()
    },
    // 判定是否全选
    handleCheckedStatesChange(val) {
      const checkedCount = val.length
      this.checkAll = checkedCount === this.approvalsStates.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.approvalsStates.length
    },
    // 闯入后端的4个参数
    // 当前页 page: 1,
    //  页面展示数据    pageSize: 10 ,
    //  传入审批类型的key值   processKey: '',
    //  传入审批状态  processState: '',字符串格式 需要添加
    /*     根据审批人和发起人页面不同的需求 发起人和审批人为当前登录人的userId
    发起人请求携带userid 审批人携带 procCurrNodeUserId */
    tabSwitch() {
      // this.approvalsStates = []
      // this.pagination.processState = ''
      // let sendData = {};
      if (this.tagName === 'launch') {
        console.log(1)

        delete this.pagination.userId
        delete this.pagination.procCurrNodeUserId
        this.pagination.userId = this.userId
      } else if (this.tagName === 'approvals') {
        console.log(2)
        delete this.pagination.userId
        delete this.pagination.procCurrNodeUserId
        this.pagination.procCurrNodeUserId = this.userId
        this.pagination.processState = '1'
      } else if (this.tagName === 'copy') {
        console.log(3)

        delete this.pagination.userId
        delete this.pagination.procCurrNodeUserId
        // delete this.pagination.processKey
        delete this.pagination.processState
      }
      this.getApprovalList()
    },
    changeSelectParams() {
      this.pagination.processKey = String(this.approvalsTypes)
      // console.log(this.checkedCcates)

      this.pagination.processState = this.checkedCcates.join(',')

      // console.log(this.pagination.processState)
      this.getApprovalList()
      // console.log(this.pagination.processKey)
    },
    // 根据用户传入的数据生成不同表单
    lookFrom(processKey, id) {
      this.dialogVisible = true

      this.$nextTick(async() => {
        this.selectedName = processKey
        this.id = id

        await this.$refs.approvalProcess.getApprovalsDetail(id)

        console.log(processKey)
        console.log(this.id)
      })
    },
    clickPass(num, id) {
      this.adoptVisible = true
      this.formData.processId = id
      if (num === '2') {
        this.formData.handleType = '2'
      } else if (num === '3') {
        this.formData.handleType = '3'
      } else if (num === '4') {
        this.formData.handleType = '4'
      }
      this.formData.handleUserId = this.userId
      this.$message.success('操作成功')
      this.adoptVisible = false
    },
    clickBack(id) {
      this.$confirm('是否驳回', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.rejectProcess(id)
        })
    },
    clickDetail(id, approvalType) {
      this.centerDialogVisible = true
      this.topLabel = approvalType
      switch (approvalType) {
        case '调岗':
          this.seeState = 'adjustThePost'
          break
        case '离职':
          this.seeState = 'quit'
          this.selectedId = id
          this.$refs.quit.updateData()
          break
        case '审核':
          this.seeState = 'examine'
          break
        case '加班':
          this.seeState = 'overtime'
          this.selectedId = id
          this.$refs.overtime.updateData()
          break
        case '录用':
          this.seeState = 'employment'
          break
        case '请假':
          this.seeState = 'leave'
          this.selectedId = id
          this.$refs.leave.updateData()
          break
        case '调休':
          this.seeState = 'leave'
          this.selectedId = id
          this.$refs.leave.updateData()
          break
        default:
          this.seeState = 'becomeARegularWorker'
          this.topLabel = '转正'
      }
    },
    closeDialog() {
      this.centerDialogVisible = false
      this.getApprovalList()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
    },
    async handleProcess() {
      await approvalsPass(this.formData)
      this.$message.success('操作成功')
      this.getApprovalList()
      this.adoptVisible = false
    },
    async rejectProcess(id) {
      await approvalsReject({ id })
      this.getApprovalList()
      this.$message.success('操作成功')
    },
    async delProcess(id) {
      await approvalsDel({ id })
      this.$message.success('撤销成功')
      this.getApprovalList()
    }

  }

}
</script>

<style lang="scss" scoped>
.usersApprovalsContainer{
   padding: 20px;
  margin-top: 15px;
  font-size: 20px;
  height: 800px;
  .el-tabs__nav{
    font-size: 20px;
  }
  .el-tabs__item{
    font-size: 30px;
  }
  .approvalsTop{
      color: #666;
    background: #fff;
    // border-bottom: solid 1px #ccc;
    line-height: 40px;

  }
  el-table{
    height: 100%;
  }
}

</style>
